import { set_platform_guidance_user } from '@/services/guide';
import { platformuser_select } from '@/services/platformuser';
import { ActionType, ProColumns } from '@ant-design/pro-components';
import { Button, Divider, Input, message, Modal, Space, Table } from 'antd';
import { SetStateAction, useEffect, useState } from 'react';
interface Iprops {
  isShowDoctorModal: (show: boolean) => void;
  doctorModal: boolean;
  actionRef: React.MutableRefObject<ActionType | undefined>;
  remoteDoctor: SetStateAction<never[]>;
  remoteId: number | undefined;
}
export type TableListItem = {
  id: number;
  phone: string;
  username: string;
  department_name: string;
};
const SetDoctor = (props: Iprops) => {
  const { isShowDoctorModal, doctorModal, actionRef, remoteId, remoteDoctor } = props;
  // console.log('已选中', selectedDoctors);
  // 医生列表数据
  const [data, setData] = useState([]);

  // 存储选中的列表项
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  // 获取结对医生列表
  useEffect(() => {
    setSelectedRowKeys(remoteDoctor);
    get_list();
  }, []);
  const get_list = async () => {
    let res: any = await platformuser_select();
    if (res.code === 200) {
      setData(res.data);
    }
  };
  // 设置结对医生
  const SetDoc = async (selectedRowKeys: number[]) => {
    console.log(selectedRowKeys);
    let request_body = {
      id: remoteId,
      platform_user_id: selectedRowKeys.toString(),
    };
    let res: any = await set_platform_guidance_user(request_body);
    if (res.code == 200) {
      message.success('结对医生设置成功！');
      actionRef.current?.reload();
      isShowDoctorModal(false);
    } else {
      message.error(res.msg);
    }
  };
  // 结对医生列表字段
  const columns: ProColumns<TableListItem>[] = [
    {
      title: '手机号',
      dataIndex: 'phone',
      align: 'center',
      filterDropdown: ({ setSelectedKeys, selectedKeys, confirm }) => (
        <div style={{ padding: 8 }}>
          <Space>
            <Input
              placeholder="请输入手机号搜索"
              value={selectedKeys[0]}
              onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
              onPressEnter={() => confirm()}
              allowClear
            />
            <Button type="primary" onClick={() => confirm()} size="small" style={{ width: 90 }}>
              搜索
            </Button>
          </Space>
        </div>
      ),
      onFilter: (value: any, record) => record.phone.toLowerCase().includes(value.toLowerCase()),
    },
    {
      title: '姓名',
      dataIndex: 'username',
      align: 'center',
      filterDropdown: ({ setSelectedKeys, selectedKeys, confirm }) => (
        <div style={{ padding: 8 }}>
          <Space>
            <Input
              placeholder="请输入姓名搜索"
              value={selectedKeys[0]}
              onChange={(e: any) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
              onPressEnter={() => confirm()}
              allowClear
            />
            <Button type="primary" onClick={() => confirm()} size="small" style={{ width: 90 }}>
              搜索
            </Button>
          </Space>
        </div>
      ),
      onFilter: (value: any, record) => record.username.toLowerCase().includes(value.toLowerCase()),
    },
    {
      title: '科室',
      dataIndex: 'department_name',
      align: 'center',
      hideInSearch: true,
    },
  ];
  return (
    <Modal
      title="设置结对医生"
      centered
      open={doctorModal}
      onCancel={() => isShowDoctorModal(false)}
      width={900}
      footer={[
        <div
          key="box"
          style={{
            position: 'absolute',
            left: '50%',
            transform: 'translateX(-50%)',
            bottom: '20px',
          }}
        >
          <Button
            key="cancellation"
            style={{ marginRight: '30px' }}
            onClick={() => {
              isShowDoctorModal(false);
            }}
          >
            取消
          </Button>
          <Button
            key="determine"
            type="primary"
            onClick={() => {
              console.log(`选中的key: ${selectedRowKeys?.toString()}`);
              SetDoc(selectedRowKeys);
            }}
          >
            确定
          </Button>
        </div>,
      ]}
    >
      <Divider />
      <Table
        columns={columns}
        style={{ minHeight: '700px' }}
        // 设置为多选框
        rowSelection={{
          type: 'radio',
          selectedRowKeys,
          onChange: (keys: any) => setSelectedRowKeys(keys),
        }}
        pagination={{
          pageSize: 10,
        }}
        dataSource={data}
        // 选中之后获取到的是id
        rowKey={(record: any) => record.id}
      />
    </Modal>
  );
};

export default SetDoctor;
